import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
const loader = new GLTFLoader();
console.log('0000000000', 55)
const width = 800; //宽度
const height = 500; //高度

// 1. 创建一个场景
const scene = new THREE.Scene()

// 创建一个三维的坐标轴（需要在物体显示之前设置 不然不显示 代码的执行顺序）
const axesHelper = new THREE.AxesHelper(150);

// 添加到三维场景中
scene.add(axesHelper)


console.log('GLTFLoader', loader)


// 2. 创建一个长方体  100 * 100 * 100
const geometry = new THREE.BoxGeometry(100, 100, 100)

// 3. 创建一个材质
const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff, //设置材质颜色
    transparent: true,//开启透明
    opacity: 0.5,//设置透明度
})

// 4. 网格模型 - 将形状（几何体）与材质 组合成一个物体
const mesh = new THREE.Mesh(geometry, material)

// 设置 网格模型（物体）的位置  默认 坐标原点
mesh.position.set(0, 0, 0)

// 5. 将创建好的物体添加到场景中
scene.add(mesh)

// console.log(mesh)

// 6. 创建一个 透视投影相机
/**
 * 参数3 近截面距离相机的距离
 * 参数4 远截面距离相机的距离
*/
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000)

// 7. 设置相机的位置
camera.position.set(200, 300, 500)

// 8. 设置相机的观察的中心点
camera.lookAt(0, 0, 0)

// 9. 创建一个渲染器 让物体呈现出来
const renderer = new THREE.WebGLRenderer()

// 10. 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(width, height);

// 11. 执行渲染操作
renderer.render(scene, camera);

// 12. 将渲染物体添加到 指代功能的元素中
document.body.appendChild(renderer.domElement);